<template>
  <Modal footer-hide width="600" title="选择知识库">
    <div class="flex overflow-hidden" style="height: 60vh">
      <div class="flex-1 h-full p-6 overflow-auto">
        <div
          class="flex items-center justify-between w-full pb-2 mb-2 border-b border-solid cursor-pointer border-slate-200"
          v-for="item in skillList"
          :key="item.id"
        >
          <div class="flex items-center flex-1 ml-3">
            <!-- <img
              class="w-8 h-8 rounded"
              src="~@/assets/images/database_default.png"
              alt="database default"
            /> -->
            <div class="flex-1">
              <p class="font-bold">{{ item.name }}</p>
              <p class="mt-1 text-xs text-slate-500">{{ item.description }}</p>
              <p class="mt-1 text-xs text-slate-400" v-if="item.releasedate || item.createtime">
                发布于{{ formatToDateTime(item.releasedate || item.createtime) }}
              </p>
            </div>
          </div>
          <Button
            v-if="form.knowledgeid.includes(item.id)"
            size="small"
            ghost
            type="error"
            @click="onDiselect(item)"
            >移除</Button
          >

          <Button v-else size="small" @click="onSelect(item)">添加</Button>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup>
import { ref, computed } from 'vue'

import { formatToDateTime } from '@/util/dateUtil'

const props = defineProps({
  showModal: Boolean,
  form: {
    type: Object,
    default: () => {}
  },
  skillList: Array,
  multiple: Boolean
})

const emit = defineEmits(['cancel'])

const onDiselect = (item) => {
  props.form.knowledgeid.splice(props.form.knowledgeid.indexOf(item.id), 1)
}

const onSelect = (item) => {
  if(!props.multiple) {
    props.form.knowledgeid = item.id
    emit('cancel')
    return 
  }
  props.form.knowledgeid.push(item.id)
}
</script>

<style></style>
